<dialog id="share_story_to_report_dialog"
        class="modal"
        x-init="$nextTick(() => $el.showModal ? $el.showModal() : $el.setAttribute('open', 'open'))"
        x-on:close="$el.remove()"
        data-testid="share-story-to-report-dialog">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <h3 class="font-bold text-lg mt-1 mb-2">Share Stories</h3>
    <form>
      <label class="select w-full mb-5">
        <span class="label">Report</span>
        <select id="report" name="report" required class="validator select w-full" data-testid="select-report-input">
          <option selected disabled>Add Stories to report</option>
          {% for report in reports %}<option value="{{ report.id }}">{{ report.title }}</option>{% endfor %}
        </select>
      </label>
      {% for story_id in story_ids %}<input type="hidden" name="story_ids" value="{{ story_id }}">{% endfor %}
      <div class="join gap-4">
        <button type="button"
                class="btn btn-outline btn-wide"
                hx-post="{{ url_for('assess.submit_report_story') }}"
                hx-target="{{ target | default('#assess') }}"
                hx-on::after-request="document.getElementById('share_story_to_report_dialog').close()"
                data-testid="share-to-report-dialog-button">Share</button>
        <a type="button"
           class="btn btn-outline btn-wide"
           href="{{ url_for('analyze.report', report_id='0') }}?{% for story_id in story_ids %}story_ids={{ story_id }}&{% endfor %}"
           data-testid="new-report-button-dialog">New Report</a>
      </div>
    </form>
  </div>
</dialog>
